import { PageContainer } from '@ant-design/pro-components'
import { Input } from 'antd'
import { renderAdminPage } from '@sker/ui'
import { useState } from 'react'
export const StylePage: React.FC<{}> = ({ }) => {
    function toUnoCss(str: string) {
        const list = str.split(';')
        let cls = ``;
        list.map(it => {
            const [key, value] = it.split(':')
            if (key) {
                const k = key.replace('\n', '').trim()
                const v = value.trim()
                if (k === 'width') {
                    // cls += `w-${v}`
                }
                if (k === 'height') {
                    cls += ` h-${v}`
                }
                if (k === 'font-size') {
                    cls += ` text-${v}`
                }
                if (k === 'color') {
                    cls += ` c-${v}`
                }
                if (k === 'font-weight') {
                    cls += ` font-${v}`
                }
                if (k === 'background') {
                    if (v.startsWith('#')) {
                        const [, d] = v.split('#');
                        cls += ` bg-hex-${d}`
                    } else {
                        cls += ` bg-[${v}]`
                    }
                }
                if (k === 'border-radius') {
                    const [tl, bl, tr, br] = v.split(' ')
                    if (tl === bl && br === tr && bl === tr) {
                        cls += ` rounded-${tl}`
                    } else {
                        cls + `rd-[${tl}, ${bl}, ${tr}, ${br}}]`
                    }
                }
            }
        })
        return `<div className='${cls}'></div>`;
    }
    const [res, setRes] = useState<string>(``)
    return <PageContainer title="样式生成器">
        <div className="flex">
            <div className="flex-1">
                <Input.TextArea rows={24} onChange={e => {
                    setRes(toUnoCss(e.target.value))
                }} />
            </div>
            <div className="flex-1 ml-8px">
                <Input.TextArea rows={24} value={res} />
            </div>
        </div>
    </PageContainer>
}


renderAdminPage(StylePage, 'imeepos/dev/web/style')